<!-- 招聘信息详情页 -->
<template>
    <view class="page-wrap">
        <view class='bg-white padding header'>
            <view class="text-xxl padding-xs title">
                {{info.jobTitle}}
            </view>
            <view class="text-xl padding-xs text-orange">{{info.jobSalary}}</view>
            <view class="text-sm padding-xs text-gray">
                 <view
                        v-for="(tag,tagIndex) in info.jobTags"
                        :key="tagIndex"
                        class="cu-tag radius light bg-gray"
                    >{{tag}}</view>
            </view>
        </view>
        <!-- 职位描述 -->
        <view class="cu-bar solid-bottom margin-top">
            <view class='action'>
                <text class='icon-titles text-orange '></text> 
                职位描述
            </view>
        </view>
        <view class="cu-card case no-card">
            <view class="cu-item shadow">
                <view class="text-left padding desc-wrap">
                    <view 
                    :class="(expendToogle && info.jobDesc && info.jobDesc.length > 150) ? ['description','add-mask','fix-height']
                    : ['description', 'auto-height']"
                    >
                        <text>{{info.jobDesc}}</text>
                    </view>
                    <view
                         v-if="info.jobDesc && info.jobDesc.length > 150"
                        :class="expendToogle ? 'expand-pannel' : ['expand-pannel', 'add-margin']"
                        @click="expendToogleHandle"
                    >
                    <template v-if="expendToogle">
                        <span>展开</span>
                        <text class='icon-unfold'></text>
                    </template>
                    <template v-else>
                        <span>折叠</span>
                        <text class='icon-fold'></text>
                    </template>
                    </view>
                </view>
            </view>
        </view>
        <!-- 薪资福利 -->
        <view class="cu-bar solid-bottom margin-top">
            <view class='action'>
                <text class='icon-titles text-orange '></text> 
                薪资福利
            </view>
        </view>
        <view class="cu-card case no-card">
            <view class="cu-item shadow">
                <view class="text-left padding">
                    <text>{{info.welfare}}</text>
                </view>
            </view>
        </view>
        <!-- 工作时间 -->
        <view class="cu-bar solid-bottom margin-top">
            <view class='action'>
                <text class='icon-titles text-orange '></text> 
                工作时间
            </view>
        </view>
        <view class="cu-card case no-card">
            <view class="cu-item shadow">
                <view class="text-left padding-sm">
                    <text class='icon-timefill text-orange'></text>开始日期
                    <span>{{workTimeStart || ''}}</span>
                </view>
                <view class="text-left padding-sm">
                    <text class='icon-timefill text-orange'></text>结束日期
                     <span>{{workTimeEnd || ''}}</span>
                </view>
                <view
                    v-if="info.workTimeExtendInfo"
                    class="text-left padding-sm extend-info">备注:
                    <span>{{info.workTimeExtendInfo || ''}}</span>
                </view>
            </view>
        </view>
        <!-- 工作地点 -->
        <view class="cu-bar solid-bottom margin-top">
            <view class='action'>
                <text class='icon-titles text-orange '></text> 
                工作地点
            </view>
        </view>
        <view class="cu-card case no-card">
            <view class="cu-item shadow">
                <view class="text-left padding">
                    <text class='icon-locationfill text-orange'></text>
                    <text>{{info.location || ''}}</text>
                </view>
            </view>
        </view>
        <!-- 二维码 -->
        <view class="margin-top qrcode-wrap">
            <view class='padding-xs'>
                <view class='text-gray text-center text-sm'>扫描下方二维码，更多兼职等待你~</view>
                <view class='text-gray text-center text-sm'>（请点击并保存图片，然后在微信或QQ中扫描相册加入群聊）</view>
            </view>
            <view class="padding-bottom cu-form-group">
                <view class="grid col-2 grid-square flex-sub">
                    <view 
                        class="padding-xs bg-img"
                        v-if="info.qrCodeUrl && info.qrCodeUrl[0]"
                        :style="{backgroundImage: 'url(' + info.qrCodeUrl[0] +')'}"
                        @click="previewImg(info.qrCodeUrl[0])"
                    >
                        <!-- <img class="qrcode-img" :src="info.qrCodeUrl[0]"> -->
                    </view>
                    <view 
                        class="padding-xs bg-img"
                        v-if="info.qrCodeUrl && info.qrCodeUrl[1]"
                        :style="{backgroundImage: 'url(' + info.qrCodeUrl[1] +')'}"
                        @click="previewImg(info.qrCodeUrl[1])"
                    >
                        <!-- <img class="qrcode-img" :src="info.qrCodeUrl[1]"> -->
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom"></view>

        <view class="cu-bar shop fix-share">
            <button class="cu-btn action"  open-type='share'>
                <text class='icon-forwardfill text-grey'>
                    <view class='cu-tag badge'></view>
                </text>
                分享给好友
            </button>
            <view v-if="isDeliveried" @click="gotoJobRecord" class='bg-grey submit'>已报名，查看记录</view>
            <view v-else @click="submit" class='bg-orange submit'>立即报名</view>
        </view>
    </view>
</template>

<script>
import {
    getInfoDetails,
    getJobRecord
} from './model/result.model';
import { format } from 'fecha';

export default {
    name: 'infoDetails',
    data() {
        return {
            expendToogle: true,
            jobId: ''
        };
    },
    onLoad(option) {
        this.jobId = option.jobId + '';
        if(!this.$store.state.userInfo.userId) {
            wx.redirectTo({
                url: '/pages/start/main'
            })
        }
    },
    onShow() {
        getJobRecord({ // 获取求职记录,用于查询是否已报名
            userId: this.$store.state.userInfo.userId
        })
        this.search();
    },
    computed: {
        jobRecordList() {
            if(this.$store.state.jobRecordList.length !== 0) {
                let jobIdList = [];
                this.$store.state.jobRecordList.map((item)=>{
                    jobIdList.push({
                        jobId: item.jobId,
                        status: item.status
                    })
                })
                return jobIdList;
            }
            return [];
        },
        info() {
            return this.$store.state.infoDetails || '';
        },
        workTimeStart() {
            if(this.info.workTimeStart) {
                return format(+this.info.workTimeStart, 'YYYY-MM-DD HH:mm:ss');
            }
            return '';
        },
        workTimeEnd() {
            if(this.info.workTimeEnd) {
                return format(+this.info.workTimeEnd, 'YYYY-MM-DD HH:mm:ss');
            }
            return '';
        },
        isDeliveried() {
            let searchJobId = ''; // 记录待筛选、已通过状态的职位id,只有这两种状态下才不能报名
            if(this.jobRecordList.length !== 0 && this.jobId) { // 有投递记录
                this.jobRecordList.map((item)=>{
                    if(item.jobId === this.jobId && (item.status === 'pending' || item.status === 'success')) { // 投递记录中存在该id并不是主动取消的
                        searchJobId = item.jobId;
                    }
                });
                if(searchJobId) {
                    return true; // 不能报名
                }
                return false; // 可以报名
            }
            return false;
        }
    },
    methods: {
        search() {
            getInfoDetails({
                jobid: this.jobId,
            }).then(()=>{
                wx.hideNavigationBarLoading(); // 隐藏导航栏加载框
                wx.stopPullDownRefresh(); // 停止下拉动作
            });
        },
        expendToogleHandle() {
            this.expendToogle = !this.expendToogle;
        },
        // gotoQQGroup() {
        //     window.location.href = this.info.qunUrl;
        // },
        previewImg(imgUrl) {
            wx.previewImage({
                current: imgUrl, // 当前显示图片的http链接
                urls: this.info.qrCodeUrl // 需要预览的图片http链接列表
            })
        },
        submit() {
            wx.navigateTo({
                url: '/pages/user-info/main?action=delivery&jobId='+this.jobId
            })
        },
        gotoJobRecord() {
            wx.navigateTo({
                url: '/pages/job-record/main'
            })
        }
    },
    onPullDownRefresh() {
        wx.showNavigationBarLoading(); // 显示顶部刷新图标
        this.search()
    },
    onShareAppMessage(response) {
        
    }
};

</script>
<style lang='less' scoped>
.page-wrap {
    position: relative;
}
.desc-wrap {
    position: relative;
    padding-bottom: 60rpx;
}
.description {
    line-height: 40rpx;
    position: relative;
    overflow: hidden;
}
.expand-pannel {
    cursor: pointer;
    color: #909399;
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 20rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-mask {
    mask-image: linear-gradient(#1A1A1A calc(100% - 2rem),transparent calc(100% - 10rpx));
    mask-size: 100% 100%;
}
.auto-height{
    height: auto;
}
.fix-height {
    max-height: 270rpx;
}
/deep/ .cu-form-group {
    background:#f1f1f1;
}
// .qrcode-wrap {
//     margin-bottom: 130rpx;
// }
.qrcode-img {
    width: 100%;
    height: 100%;
}

.bottom {
    height: 50px;
}

.fix-share {
    position:fixed;
    width:100%;
    bottom:0;
    z-index:1024;
}
</style>
